<template>
  <div class="pay-list">
    <table-search :title="title" @inputBtn="inpSearch"></table-search>
    <table-list
      :toTableData="tableData"
      :tableHeader="tableHeader"
      :deleteEdit="deleteEdit"
    ></table-list>
  </div>
</template>

<script>
import TableList from "../common/TableList";
import TableSearch from "../common/TableSearch";

export default {
  data() {
    return {
      title: "输入姓名搜索",
      tableData: [],
      tableHeader: [
        { prop: "name", label: "姓名" },
        { prop: "address", label: "地址" },
        { prop: "water", label: "水费" },
        { prop: "electric", label: "电费" },
        { prop: "time", label: "缴费时间" },
      ],
      deleteEdit: {
        options: 0,
        delete: 1,
        edit: 1,
      },
    };
  },
  components: {
    TableList,
    TableSearch,
  },
  created() {
    this.requestData();
  },
  methods: {
    requestData() {
      return new Promise((resove, reject) => {
        // console.log("555");
        this.$request({
          url: "/pay-list", //传入confing,在baseURL后面的值
        })
          .then((res) => {
            console.log(res); //res中含有请求的data等数据
            this.tableData = res.data.data;
            resove();
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
    inpSearch(title) {
      this.requestData().then(() => {
        if (title.length >= 1) {
          let newShowData = this.tableData.filter((s) => {
            return s.name.includes(title);
          });
          this.tableData = newShowData;
          console.log(newShowData);
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/global.scss";
.pay-list {
  width: 100%;
}
</style>
